<template>
    <div class="prepend-select" :class="classac">
        <div class="select-group__prepend">
            <slot name="prepend"></slot>
        </div>
        <el-select v-bind="$attrs">
            <slot></slot>
        </el-select>
    </div>
</template>

<script>
import { useSlots } from 'vue'
export default {
    props: {},
    data() {
        return {
            classac: ''
        }
    },
    mounted() {
        const slots = useSlots()
        if (slots.prepend) {
            this.classac = 'el-input--suffix'
        }
    }
}
</script>

<style lang="scss">
.prepend-select {
    .el-select {
        .el-input__wrapper {
            border-left: 0;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }
    }
}
</style>

<style lang="scss" scoped>
.prepend-select {
    --el-input-height: var(--el-component-size);
    --el-input-border-radius: var(--el-border-radius-base);
    --el-input-border-color: var(--el-border-color);
    
    width: 100%;
    display: inline-flex;
    align-items: stretch;
    position: relative;
    font-size: var(--el-font-size-base);
    line-height: var(--el-input-height);
    box-sizing: border-box;
    vertical-align: middle;
    border-radius: var(--el-input-border-radius);
    
    .select-group__prepend {
        background-color: var(--el-fill-color-light);
        color: var(--el-color-info);
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 100%;
        border-radius: var(--el-input-border-radius);
        padding: 0 20px;
        white-space: nowrap;
        border-right: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        box-shadow: 1px 0 0 0 var(--el-input-border-color) inset,0 1px 0 0 var(--el-input-border-color) inset,0 -1px 0 0 var(--el-input-border-color) inset;
    }
}
</style>
